<template>
  <div class="container" ref="box">
    <div class="form-container">
      <el-upload
        ref="upload0"
        class="upload-demo"
        action="ok"
        :limit="1"
        multiple
        :http-request="file_upload_camp"
        :on-change="changeList0"
        :file-list="fileList0"
      >
        <el-button type="primary" v-loading="loading0">上传CAMP表</el-button>
      </el-upload>
      <el-upload
        ref="upload1"
        class="upload-demo"
        action="ok"
        :limit="1"
        multiple
        :http-request="file_upload_mtop"
        :on-change="changeList1"
        :file-list="fileList1"
      >
        <el-button type="primary" v-loading="loading1">上传MTOP表</el-button>
      </el-upload>
      <el-upload
        ref="upload2"
        class="upload-demo"
        action="ok"
        :limit="1"
        multiple
        :http-request="file_upload_time"
        :on-change="changeList2"
        :file-list="fileList2"
      >
        <el-button type="primary" v-loading="loading2">上传接近工时表</el-button>
      </el-upload>
    </div>
    <div class="table-container">
      <div>请先上传文件再进行计算</div>
    </div>
  </div>
</template>

<script>
// import store from '../store/index'
import echarts from 'echarts'
import router from '../../router/index'
import { campUpload, mtopUpload, timeUpload, fileExist} from '../../api/modules/login'
import { mapState } from 'vuex'
export default {
  props: {

  },
  data () {
    return {
      userId: "",
      fileList0: this.$store.state.tools.fileList0,
      loading0: false,
      fileList1: this.$store.state.tools.fileList1,
      loading1: false,
      fileList2: this.$store.state.tools.fileList2,
      loading2: false,
    }
  },
  mounted () {
    // userId的检测
    if(! window.localStorage.getItem("userId")){  
      let id = parseInt(new Date().getTime()).toString()
      window.localStorage.setItem("userId", id)
      this.userId = id
    }
    else{
      this.userId = window.localStorage.getItem("userId")
    }
    //文件完整性检查
    this.checkFile()
  },
  methods: {
    checkFile(){
      fileExist(this.userId).then((res) => {
        if (res.status === 200) {
          if(res.data.errCode == 0){
            this.$store.commit("setFileOk", true)
          }
          else{
            this.$store.commit("setFileOk", false)
            let third = {
              path: '/third'
            }
            router.push(third)
          }
        } else {
          console.log("error ok")
        }
      })
    },
    changeList0: function(file, fileList){
      if(fileList){
        this.fileList0 = fileList
        this.$store.commit("setFileList0", this.fileList0)
      }
    },
    changeList1: function(file, fileList){
      if(fileList){
        this.fileList1 = fileList
        this.$store.commit("setFileList1", this.fileList1)
      }
    },
    changeList2: function(file, fileList){
      if(fileList){
        this.fileList2 = fileList
        this.$store.commit("setFileList2", this.fileList2)
      }
    },
    file_upload_camp: function (params) {
      this.loading0 = true
      const _this = this
      let fileFormData = new FormData()
      let fileData = params.file
      console.log(this.fileList0)

      fileFormData.append("file", fileData)
      campUpload(fileFormData, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          console.log("200 ok")
          this.loading0 = false
          this.checkFile()
          this.$message("上传完毕")
        } else {
          console.log("error ok")
        }
      })
    },
    file_upload_mtop: function (params) {
      this.loading1 = true
      const _this = this
      let fileFormData = new FormData()
      let fileData = params.file

      fileFormData.append("file", fileData)
      mtopUpload(fileFormData, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          console.log("200 ok")
          this.loading1 = false
          this.checkFile()
          this.$message("上传完毕")
        } else {
          console.log("error ok")
        }
      })
    },
    file_upload_time: function (params) {
      this.loading2 = true
      const _this = this
      let fileFormData = new FormData()
      let fileData = params.file

      fileFormData.append("file", fileData)
      timeUpload(fileFormData, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          console.log("200 ok")
          this.loading2 = false
          this.checkFile()
          this.$message("上传完毕")
        } else {
          console.log("error ok")
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.upload-demo{
  margin-bottom: 50px;
  height: 80px;
  width: 160px;
}
.upload-demo .el-button{
  width: 160px;
}
.form-container{
  position: absolute;
  display: flex;
  flex-flow: column nowrap;;
  align-items: center;
  width: 200px;
  height: calc(100vh - 120px);
  padding-top: 50px;
  border-right: #dedede 1px solid;
}
.table-container{
  margin-left: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  position: absolute;
  width: calc(100vw - 240px);
  height: 60%;
}
</style>
